<template>
  <div>
    <el-row :gutter="20" class="hg">
      <el-col :span="6">
        <div class="grid-content bg-c0c4">
          实际放款总金额（元）
          <div>
            ￥100000.00
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-c0c4">
          回款总金额（元）
          <div>￥20000.00</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-c0c4">
          资产总金额（元）
          <div>￥120000.00</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-c0c4">
          总盈亏（元）
          <div>￥50000.00</div>
        </div>
      </el-col>
    </el-row>

    <el-row justify="center" type="flex">
      <el-col :span="11">
        <el-row>
          <el-col :span="23">
            <span>当前待处理</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <div id="pending" style="width: 100%; height: 300px;" />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="11">
        <el-row>
          <el-col :span="23">
            <span>账单</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <div id="bill" style="width: 100%; height: 300px;" />
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row justify="center" type="flex">
      <el-col :span="22">
        <div>
          <el-row>
            <el-col :span="24">
              <span>放款</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div id="testgram" style="width: 100%; height: 400px;" />
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" justify="center" type="flex">
      <el-col :span="12">
        <el-row justify="center" type="flex">
          <el-col :span="22">
            <div>
              <el-row>
                <el-col :span="24">
                  <span>申请转化</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div id="funnel" style="width: 100%; height: 400px;" />
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row justify="center" type="flex">
          <el-col :span="22">
            <div>
              <el-row>
                <el-col :span="24">
                  <span>贷后</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div id="pieChart" style="width: 100%; height: 400px;" />
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      // 图表配置项对象
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const testgram = this.$echarts.init(document.getElementById('testgram'))
      testgram.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: [{
          type: 'value',
          name: '金额',
          min: 0,
          max: 100000
        },
        {
          type: 'value',
          name: '成交单数',
          min: 0,
          max: 25,
          interval: 5
        }],
        series: [
          {
            data: [10000, 22000, 28000, 43000, 49000, 89000, 30000, 40000, 47890, 20000, 10000, 5000],
            type: 'line'
          },
          {
            data: [2, 4, 3, 5, 10, 15, 4, 6, 14, 6, 3, 0],
            type: 'line',
            yAxisIndex: 1
          },
          {
            data: [10000, 22000, 28000, 43000, 49000, 70000, 35000, 46000, 58000, 38000, 14000, 5000],
            type: 'bar'
          }
        ]
      })
      const funnel = this.$echarts.init(document.getElementById('funnel'))
      funnel.setOption({
        series: [
          {
            name: 'Funnel',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: [
              { value: 100, name: '创建申请' },
              { value: 80, name: '提交申请' },
              { value: 60, name: '审核通过' },
              { value: 40, name: '放款完成' }
            ]
          }
        ]
      })
      const pieChart = this.$echarts.init(document.getElementById('pieChart'))
      pieChart.setOption({
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '待还款' },
              { value: 735, name: '已还款' },
              { value: 580, name: '已逾期' }
            ]
          }
        ]
      })
      const pending = this.$echarts.init(document.getElementById('pending'))
      pending.setOption({
        xAxis: {
          type: 'category',
          data: ['填写资料', '等待审核', '待放款', '放款中']
        },
        yAxis: {
          type: 'value',
          name: '单数',
          min: 0,
          max: 10
        },
        series: [
          {
            data: [6, 1, 3, 5],
            type: 'bar'
          }
        ]
      })
      const bill = this.$echarts.init(document.getElementById('bill'))
      bill.setOption({
        xAxis: {
          type: 'category',
          data: ['应回款', '待回款', '已回款']
        },
        yAxis: {
          type: 'value',
          name: '金额',
          min: 0,
          max: 9000
        },
        series: [
          {
            data: [7000, 3000, 4000],
            type: 'bar'
          }
        ]
      })
      bill.on('click', params => {
        this.$router.push('/loan/billList/index')
      })
      pending.on('click', params => {
        if (params.name === '填写资料') {
          this.$router.push('/order/firstTrial/index')
        }
        if (params.name === '等待审核') {
          this.$router.push('/order/firstTrial/index')
        }
        if (params.name === '待放款') {
          this.$router.push('/loan/lendingOrder/index')
        }
        if (params.name === '放款中') {
          this.$router.push('/loan/paidOrder/index')
        }
      })
      funnel.on('click', params => {
        if (params.data.name === '审核通过') {
          this.$router.push('/loan/lendingOrder/index')
        }
        if (params.data.name === '创建申请') {
          this.$router.push('/customFeed/addNewFeed/step1?handle=add1')
        }
        if (params.data.name === '提交申请') {
          this.$router.push('/order/firstTrial/index')
        }
        if (params.data.name === '放款完成') {
          this.$router.push('/loan/billList/index')
        }
      })
      pieChart.on('click', params => {
        if (params.data.name === '已逾期') {
          this.$router.push('/dlay/allDlay/index')
        }
        if (params.data.name !== '已逾期') {
          this.$router.push('/collect/collectLoanList/index')
        }
      })
    }
  }
}
</script>

<style>
.mgb {
  margin-bottom: 20px;
  padding: 20px;
}

.hi {
  line-height: 200px;
  padding: 20px;
}

.he {
  line-height: 450px;
  padding: 20px;
}

.hl {
  text-align: center;
  line-height: 400px;
  margin-bottom: 20px;
  padding: 20px;
}

.hg {
  /* text-align: center; */
  line-height: 50px;

  padding: 20px;

}

.el-row {
  margin-bottom: 20px;

}

.el-col {
  border-radius: 4px;
}

.bg-c0c4 {
  background: #C0C4CC;
}

.bg-purple-dark {
  background: #FFFFFF;
}

.bg-purple {
  background: #E4E7ED;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 10px;
  min-height: 36px;
  /* padding-bottom: 70px; */
  text-align: center;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #d3dce6;
  color: #333;
  /* text-align: center; */
  line-height: 200px;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
